<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- cornerstone css - provides some useful css classes -->
    <link href="../../dist/cornerstone.css" rel="stylesheet">

</head>
<body>
<div class="container">

    <h1>
        multimage/index.html
    </h1>
    This is an example of showing two mr images and one ct image on one page.  Note that two different
    imageId plugins are used in this case - one for the mr images and one for the ct image.
    <br>
    <br>

    <div id="mr1" style="width:256px;height:256px;display:inline-block;"
         class="cornerstone-enabled-image"
         oncontextmenu="return false"
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
    </div>
    <div id="mr2" style="width:256px;height:256px;display:inline-block;"
         class="cornerstone-enabled-image"
         oncontextmenu="return false"
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
    </div>
    <div id="ct1" style="width:512px;height:512px;"
         class="cornerstone-enabled-image"
         oncontextmenu="return false"
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
    </div>

</div>
</body>

<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoaderCt.js"></script>

<script>
    $(document).ready(function() {
        // image enable the elements
        var mr1 = cornerstone.enable(document.getElementById('mr1'));
        var mr2 = cornerstone.enable(document.getElementById('mr2'));
        var mr3 = cornerstone.enable(document.getElementById('ct1'));

        // load and display the images
        cornerstone.loadAndCacheImage('example://1').then(function(image) {
            cornerstone.displayImage(mr1, image);
        });
        cornerstone.loadAndCacheImage('example://2').then(function(image) {
            cornerstone.displayImage(mr2, image);
        });
        cornerstone.loadAndCacheImage('ctexample://1').then(function(image) {
            cornerstone.displayImage(ct1, image);
        });
    });


</script>

</html>
